<template>
  <PageListContainer>
    <div class="base-block">
      <el-tabs v-model="state.params.invoice_status" @tab-click="onClickTab">
        <el-tab-pane v-for="item in tabsOptions" :key="item.value" :name="item.value" :label="item.label"></el-tab-pane>
      </el-tabs>
      <k-search :model="state.params" @search="methods.onSearch" @reset="onClickReset">
        <el-form-item label="客户信息">
          <el-input v-model="state.params.key_word" clearable placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="申请时间">
          <el-date-picker
            v-model="state.params._timeArr"
            type="daterange"
            format="YYYY-MM-DD"
            value-format="YYYYMMDD"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="dateShortcut"
            @change="methods.onSearch"
          />
        </el-form-item>
      </k-search>
    </div>
    <div class="base-block">
      <KTable v-loading="state.loading" v-bind="tableState" v-on="tableEvent">
        <template #remark="s">
          <div class="table-text">
            {{ s.row.remark }}
            <el-link type="primary" class="btn-remark" @click="onClickEditRemark(s.row)">编辑</el-link>
          </div>
        </template>

        <template #actions="s">
          <el-link v-if="s.row.invoice_status === 0" type="primary" @click="onClickInvoice(s.row)">去开票</el-link>
          <el-link v-if="s.row.invoice_status === 1" type="primary" @click="onClickInvoiceList(s.row)">开票记录</el-link>
        </template>
      </KTable>
    </div>
    <!-- 订单备注 -->
    <EditRemarkModal ref="editRemarkModal" @success="methods.getList" />
    <!-- 开票 -->
    <InvoiceListModal ref="invoiceListModal" @success="methods.getList" />
  </PageListContainer>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { TabsPaneContext } from 'element-plus';
import { useTableList, tabsOptions } from './hooks/use-table';
import EditRemarkModal from './components/edit-remark-modal.vue';
import InvoiceListModal from './components/invoice-list-modal.vue';
import { AuthCode, hasPermission } from '@/modules/auth';
import { toolGetDateRangeShorcuts as dateShortcut } from '@/utils';

defineOptions({ name: 'AgencyKgjAgentAgentInvoicing' });
const { state, tableState, tableEvent, ...methods } = useTableList({});
// 编辑备注
const editRemarkModal = ref();
const onClickEditRemark = (row: any) => {
  editRemarkModal.value.show(1, row);
};
// 去开票
const invoiceListModal = ref();
const onClickInvoice = (row: any) => {
  if (hasPermission(AuthCode.AGENCY_AGENT_INVOICE_CHECK)) {
    invoiceListModal.value.show(1, { ...row, invoiceType: 1 });
  }
};
// 开票记录

const onClickInvoiceList = (row: any) => {
  if (hasPermission(AuthCode.AGENCY_AGENT_INVOICE_CHECK)) {
    invoiceListModal.value.show(2, { ...row, invoiceType: 2 });
  }
};
// 重置
const onClickReset = () => {
  methods.onReset();
};
// tab切换
const onClickTab = (tab: TabsPaneContext) => {
  state.params.invoice_status = tab?.paneName;
  methods.onSearch();
};

</script>
<style lang="scss" scoped>
.table-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  word-break: break-all;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.btn-remark {
  margin-left: 6px;
}
</style>
